<template>
	<view class="form-container">
		<u-form :model="model" :rules="rules" ref="form">
			<u-form-item label-width="150rpx" label="*收款人" prop="userInfo.name" borderBottom ref="item1">
				<u-input placeholder="请输入收款人" v-model="model.userInfo.name" border="none"></u-input>
			</u-form-item>
			<u-form-item label-width="150rpx" label="*开户银行" prop="userInfo.bank" borderBottom ref="item2">
				<u-input placeholder="请输入开户银行" v-model="model.userInfo.bank" border="none"></u-input>
			</u-form-item>
			<u-form-item label-width="150rpx" label="*银行卡号" prop="userInfo.cardNumber" borderBottom ref="item3">
				<u-input placeholder="请输入银行卡号" v-model="model.userInfo.cardNumber" border="none"></u-input>
			</u-form-item>
		</u-form>
		<u-button class="submit-button" shape="circle" iconColor="#9b742f" @click="onSubmit">提交</u-button>
	</view>
</template>
<script>
	import {sendBank , getBank} from '@/config/api.js'
	export default {
		data() {
			return {
				model: {
					userInfo: {
						name: '',
						bank: '',
						cardNumber: ''
					}
				},
				rules: {
					'userInfo.name': [{
						required: true,
						message: '收款人是必填项',
						trigger: 'blur'
					}],
					'userInfo.bank': [{
						required: true,
						message: '开户银行是必填项',
						trigger: 'blur'
					}],
					'userInfo.cardNumber': [{
						required: true,
						message: '银行卡号是必填项',
						trigger: 'blur'
					}]
				},
				bankid: null
			};
		},
		methods: {
			onSubmit() {
				console.log()
				// this.$refs.form.validate((valid) => {
				// 	if (valid) {
				// 		// 表单验证成功，执行提交操作
				// 		console.log('提交成功', this.model);
				// 	} else {
				// 		console.log('表单验证失败');
				// 		return false;
				// 	}
				// });
				this.$refs.form.validate().then(res => {
					console.log('校验通过,表单提交：',this.model)
					sendBank({
						card_name: this.model.userInfo.name,
						card_bank: this.model.userInfo.bank,
						card_number: this.model.userInfo.cardNumber,
						id: this.model.bankid
					}).then(data=>{
						console.log(data)
					})
				}).catch(errors => {
					console.log('校验失败')
					return false
				})
			}
		},
		mounted() {
			getBank().then(data=>{
				if(data[0]){
				this.model.userInfo.name = data[0].card_name
				this.model.userInfo.cardNumber = data[0].card_number
				this.model.userInfo.bank = data[0].card_bank
				this.model.bankid = data[0].id
				}
			})
		}
	};
</script>
<style>
	.form-container {
		position: relative;
		min-height: 100vh;
		/* 使容器至少占满整个视口高度 */
		padding-bottom: 80px;
		/* 留出空间给固定的按钮 */
	}

	.submit-button {
		position: fixed;
		bottom: 20px;
		/* 距离底部的距离 */
		left: 50%;
		/* 水平居中 */
		transform: translateX(-50%);
		/* 调整以实现完全居中 */
	}
</style>